import router, { asyncRoutes } from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// 转圈圈样式去除
NProgress.configure({ showSpinner: false })

// 白名单
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  const token = store.getters.token
  //  判断是否有token
  if (token) {
    // 判断是不是去登录页
    if (to.path === '/login') {
      next('/') // 引导去首页
      NProgress.done()
    } else {
      // 发送请求
      console.log(store.state.user.userInfo.userId, 111)
      if (!store.state.user.userInfo.userId) {
        const res = await store.dispatch('user/getUserInfo')
        console.log('将来处理权限使用', res)
        // addRoutes 动态添加路由多个路由
        // 我们通过路由实例去调用 即router.addRoutes
        // 1个路由 数组里只有一个路由，那就是一个路由 传入的参数依然是数组
        router.addRoutes(asyncRoutes)
        // 注意有一个固定的语法，就是配合addRoutes 他叫回首掏
        // 因为addRoutes其实是异步的，代码执行后路由并没有全部添加完，我们需要回首掏
        // ...to代表就是我们去哪里，to的参数全部都要
        // push和replace区别 replace不进history栈。你回退的时候上上个页面
        // 回首掏在我们这个演示例子中，相当于再次进入首页 首页 -> 首页，就用replace直接不进历史栈
        next({
          ...to,
          replace: true
        })
        return
      }
      next() // 放行
    }
  } else {
    // 没有token去登录页或者是404页面放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 没有token还想去白名单之外的页面直接打回登录页
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach((to, from) => {
  document.title = to?.meta?.title || '人资管理项目'
  NProgress.done()
})
